<template name="zpicture">
	<view  class="center-view">
		<!-- <text class="question">{{que}}(文件大小不要超过1M)<text class="tip" v-if="!empty">*</text></text> -->
		
		<view class="center-view" style="height:700upx;">
			<view class="center-view" @click="choosePic" style="border:1upx dashed gray;height:500upx;width:600upx">
				<image v-show="src.length == 0"  style="height:300upx;width:300upx;margin-top:20upx;margin-top:100upx;" src="/static/picture.svg"></image>
				<text v-show="src.length == 0" >选择图片</text>
				<image v-show="src.length > 0" style="height:500upx;width:600upx" :src="src"/>
			</view>
			<!-- <view  style="border:1upx dashed gray;height:80%;">
				
			</view> -->
			<!-- <button>选择图片</button> -->
			<view class="center-view"  @click="uploadPic" style="margin-top:-30upx">
				<image style="height:200upx;margin-bottom:-50upx;" src="/static/upload.svg"></image>
				<text>上传图片</text>
			</view>
			
			<!-- <button style="margin-top:0upx;">上传</button> -->
		</view>
		<text class="tip" v-if="errorText.length>0">{{errorText}}</text>
	</view>
</template>
<script>
	export default {
		name : "zpicture",
		data() {
			return {
				// input_height : ""
				// question : "问题"
				errorText : "",
				src : "",
				format : "",
				finalSrc : null,
				base64 : ""
			};
		},
		props : {
			compType : {
				type : String,
				default : "zpicture"
			},
			isEdit : {
				type : Boolean,
				default : false
			},
			maxSize : {
				type : Number,
				default : 32
			},
			empty : {
				type : Boolean,
				// value : true，
				default : true
			},
			que : {
				type : String,
				default : "问题"
			},
			noUpload : {
				type : Boolean,
				default: true
 			}
		},
		created : function(e){
			
		},
		methods: {
			urlTobase64 :function(url,format,id,questions) {
				var vm = this;
				var base64 = '';
				// console.log(base64)
				// console.log(url)
				uni.request({
					url: url,
					method: 'GET',
					responseType: 'arraybuffer',
					success: res => {
						var base64 = wx.arrayBufferToBase64(res.data); //把arraybuffer转成base64
						// console.log(base64)
						base64 = 'data:image/' + format + ';base64,' + base64; //不加上这串字符，在页面无法显示
						// console.log(base64);
						var param = {'picCode':base64,'maxSize':32};
						vm.$post(vm.fileurl + '/file/uploadPicByCode',param,function(res){
							var data = res.data;
							if(data.code != 0){
								uni.showModal({
									title : '错误',
									content : data.message,
									showCancel : false
								})
								// console.log("上传成功")
								
								uni.showToast({
									title : "上传成功",
									duration : 2000
								})
								return ;
							}						
							vm.finalSrc = data.object;
							// console.log(vm.finalSrc)
							uni.hideLoading();
						});
					}
				});
			},
			choosePic : function(){
				var vm = this;
				uni.chooseImage({
					count: 1,
					success: res => {
						
						// this.imageList = this.imageList.concat(res.tempFilePaths);
						// console.log(res);
						vm.src = res.tempFilePaths[0];
						// console.log(res)
						// console.log(vm.src)
						// console.log(res.tempFiles[0])
						// #ifdef H5
						var temp = '' + res.tempFiles[0].name;
						// #endif
						// #ifndef H5
						var temp = '' + res.tempFiles[0].path;
						// #endif
						var parts = temp.split(".");
						vm.format = parts[parts.length - 1];
						vm.finalSrc = null;
						// console.log('format' + vm.format)
						// console.log(vm.src)
						// this.tempFilePaths = res.tempFilePaths[0];
						// this.urlTobase64(res.tempFilePaths[0]);
					}
				});
			},
			uploadPic : function(){
				if(this.finalSrc != null){
					uni.showModal({
						title : '错误',
						content : '您已成功上传图片',
						showCancel : false
					})
					return ;
				}
				if(this.isEdit || this.noUpload){
					uni.showModal({
						title : '错误',
						content : '当前仅供预览，不可上传图片',
						showCancel : false
					})
					return ;
				}
				if(this.src == null || this.src == ""){
					uni.showModal({
						title : '错误',
						content : '清先选择图片',
						showCancel : false
					})
					return;
				}
				uni.showLoading({
					title : '图片上传中'
				})
				// #ifdef H5
					// Base64编码正式上传图片到服务器上
					this.urlTobase64(this.src,this.format);
				// #endif
				// #ifndef H5
					var vm = this;
					// console.log('准备上传')
					// console.log(this.src);
					uni.getStorage({
						key : 'userToken',
						success :function(res){
							var tokenJson = res.data;
							// var param = {}
							// // console.log(data)
							// param['token'] = tokenJson['token'];
							// param['userId'] = tokenJson['userId'];
							console.log(tokenJson)
							wx.uploadFile({
								url: vm.fileurl + '/file/uploadPic?token=' + tokenJson['token'] + '&userId=' + tokenJson['userId'], //图片文件上传接口
								filePath: vm.src,
								name: 'pic',  //
								header: { 
									'Content-Type': 'multipart/form-data',
									// 'Authorization': wx.getStorageSync("access_token"),  //如果需要token的话要传
								},
								formData: {
									method: 'POST'   //请求方式
								},
								success (res){
									// console.log(res)
									// var obj = JSON.parse(res);
									var data = JSON.parse(res.data);
									// console.log(data)
									uni.hideLoading();
									if(data.code != 0){
										// console.log(data)
										// console.log('错误信息是' + data.message)
										uni.showModal({
											title : '上传失败',
											content : data.message,
											showCancel : false
										})
										return;
									}
									uni.showToast({
										title : "上传成功",
										duration : 2000
									})
									vm.finalSrc = data.object;
									// console.log(res)
									//do something
								}
							})
						},
						fail : function(){

						}
					})
					
				// #endif
			},
			get : function(){
					if(!this.empty && this.finalSrc == null){
						this.errorText = '请先上传图片';
						return null;
					}
					if(this.empty && this.finalSrc == null){
						this.finalSrc = "noImage";
					}
					return this.finalSrc;
				
				
				
			}
		}
	}
</script>

<style>
	@import "../../../common/zcss.css";
	.picker-view{
		flex-direction: column;
	}
	.question{
		display: inline;
		font-size: 15upx;
	}
	/* #answer-view{
		flex-direction: row;
	} */
	.tip{
		padding-top: 5upx;
		margin-left: 5upx;
		color: red;
		font-size: 30upx;
	}
</style>
